<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :before-close="closeUserDialog"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="96px">
      <el-form-item prop="userName" label="账号">
        <el-input
          placeholder="请输入账号"
          maxlength="36"
          v-model="form.userName"
        ></el-input>
      </el-form-item>

      <el-form-item prop="password" label="密码">
        <el-input
          placeholder="请输入密码"
          maxlength="12"
          v-model="form.password"
        ></el-input>
      </el-form-item>

      <el-form-item required prop="departmentId" label="所属部门">
        <el-select
          v-model="form.departmentId"
          size="medium"
          placeholder="请选择所属单位"
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dptOpts"
            :key="index"
            :label="item.allName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input
          placeholder="请输入备注"
          maxlength="60"
          v-model="form.remark"
        ></el-input>
      </el-form-item>

      <div class="dialog-btns">
        <el-button @click="closeUserDialog" size="medium">取消</el-button>
        <el-button @click="editStaffHandle" type="primary" size="medium">{{
          form.id ? "编辑" : "新增"
        }}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
  
<script>
import { departmentList } from "@/api/organization/departments";
import { addStaff, updateStaff } from "@/api/organization/staff";
export default {
  name: "StaffEdit",
  props: {
    formData: {
      type: Object,
    },
    title: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const passwordRule = (rule, value, callback) => {
      if (this.form.id && !value) {
        callback();
      }
      let length = value.length;

      if (length >= 6 && length <= 12) {
        callback();
      } else {
        callback(new Error("6~12个字符"));
      }
    };
    return {
      form: {},
      dptOpts: [],
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号(长度在 2 到 36 个字符)",
            trigger: "blur",
          },
          {
            min: 2,
            max: 36,
            message: "长度在 3 到 36 个字符",
            trigger: "blur",
          },
        ],
        departmentId: [
          {
            required: true,
            message: "请选择所属部门",
            trigger: "blur",
          },
        ],
        password: {
          required: true,
          validator: passwordRule,
          trigger: "blur",
        },
      },
      imageUrl: null,
      file: null,
    };
  },
  created() {
    this.form = JSON.parse(JSON.stringify(this.formData));
    this.getDepartmentHandle();
    if (!this.form.userName) {
      this.resetForm();
    }
  },
  methods: {
    getDepartmentHandle() {
      departmentList().then((res) => {
        this.dptOpts = res.data.data;
      });
    },
    resetForm() {
      this.form = {
        userName: "",
        password: "",
        remark: "",
        departmentId: "",
      };
    },
    editStaffHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            addStaff(this.form).then((res) => {
              this.closeUserDialog("refresh");
            });
          } else {
            updateStaff(this.form).then((res) => {
              this.closeUserDialog("refresh");
            });
          }
        }
      });
    },
    closeUserDialog(type) {
      this.$forceUpdate();
      if (type === "refresh") {
        this.form = {};
        this.$emit("closeDialog", "dialogVisible", type === "refresh");
      } else {
        this.form = {};
        this.$emit("closeDialog", "dialogVisible", type === "refresh");
      }
    },
  },
  computed: {
    dialogTitle() {
      return (this.form.id ? "编辑" : "新增") + this.title;
    },
  },
};
</script>

<style scoped lang="scss">
</style>